﻿@model  List<PEPe.DataAccessModel.Agenda>
@{
    ViewBag.Title = "Index";
}

@Styles.Render("~/time-line.css")
@Scripts.Render("~/TimeLine")

@Scripts.Render("~/bundles/thema")


<script>
    $(function () {
        $().timelinr({
            arrowKeys: 'true'
        })
    });
</script>


<div class="menubar">
    <div class="sidebar-toggler visible-xs">
        <i class="ion-navicon"></i>
    </div>

    <div class="page-title">
        AGENDA
    </div>

    <div class="period-select hidden-xs">
        @using (Html.BeginForm("FiltrarTimeLine", "Home", FormMethod.Post, new { @class = "input-daterange" }))
        {       
            <div class="input-group input-group-sm">
                <span class="input-group-addon">
                    <i class="fa fa-calendar-o"></i>
                </span>
              
                 <input name="dataIni" id="dataIni" type="text" class="form-control datepicker" class="form-control datepicker" />
              
            </div>

            <p class="pull-left">to</p>

            <div class="input-group input-group-sm">
                <span class="input-group-addon">
                    <i class="fa fa-calendar-o"></i>
                </span>
                <input name="dataFim" id="dataFim" type="text" class="form-control datepicker" />
            </div>

            <p class="pull-left">&nbsp;</p>

            <div class="input-group input-group-sm">
                <input type="submit" id="btnFiltrar" name="btnFiltrar" value="Filtrar" class="btn btn-default">
            </div>
        }
    </div>
</div>

<div class="content-wrapper">


    <section id="cd-timeline" class="cd-container">


        @{
            foreach (var item in Model)
            {
                <div class="cd-timeline-block">
                    <div class="cd-timeline-img cd-picture">
                        <img src="@Url.Content("~/img/cd-icon-picture.svg")" alt="Picture">
                    </div>

                    <div class="cd-timeline-content">
                        <h2>Profissional: @item.Consulta.Profissional.Nome</h2>
                        <p>Profissional: @item.Consulta.Profissional.Nome</p>
                        <a href="../../Logado/Agenda/AgendaDetalhe/@item.Id" class="cd-read-more">Detalhes</a>
                        <span class="cd-date">@string.Format("{0:dd/MM/yyyy HH:mm}", item.DataHora)</span>
                    </div> 
                </div> 
            }
        }


    </section>
</div>


<script type="text/javascript" src="@Url.Content("~/js/main")"></script>

<script type="text/javascript">

  
    // Datepicker
    $('.datepicker').datepicker({
        autoclose: true
    });
    
    $("#dataIni").mask("99/99/9999");
    $("#dataFim").mask("99/99/9999");
</script>
